$(document).ready(function () {
  console.log("页面加载完成，开始加载数据...");

  const data = rankData;
  console.log("数据加载成功:");

  // 渲染前3名（带图片）
  renderTopThree(data.slice(0, 3));

  // 渲染4名以后（带滚动效果）
  renderOthersWithScroll(data.slice(3));

  // 渲染前3名的函数
  function renderTopThree(topThree) {
    const $rankList = $(".rank-box:first .rank-list");
    // 只清空排行数据项，保留表头
    $rankList.find(".rank-item").remove();

    topThree.forEach(function (item, index) {
      const rankItem = `
                <div class="rank-item">
                  <div class="rank-item-td">
                    <img class="rank-item-img " src="images/${index + 1}.png">
                    <div class="text-ellipsis-2">${item.name}</div>
                  </div>
                  <div class="rank-item-td">${item.dim}</div>
                  <div class="rank-item-td">¥${item.price}</div>
                  <div class="rank-item-td">${item.qty}</div>
                </div>
            `;
      $rankList.append(rankItem);
    });
    console.log("前3名渲染完成");
  }

  // 渲染4名以后的数据并添加滚动效果
  function renderOthersWithScroll(allOthers) {
    const $rankList = $(".rank-box-bottom .rank-list");
    const displayCount = 7; // 显示7条数据（4-10名）
    let startIndex = 0; // 起始索引，从第4名开始

    // 渲染当前显示的数据
    function updateDisplay() {
      // 只清空排行数据项，保留表头
      $rankList.find(".rank-item").remove();

      for (let i = 0; i < displayCount; i++) {
        const dataIndex = (startIndex + i) % allOthers.length;
        const item = allOthers[dataIndex];
        const rankNumber = dataIndex + 4; // 从第4名开始计算

        const rankItem = `
        <div class="rank-item rank-item-no-img">
          <div class="rank-item-td">
            <div class="rank-number">${rankNumber}</div>
            <div class="text-ellipsis-2">${item.name}</div>
          </div>
          <div class="rank-item-td">${item.dim}</div>
          <div class="rank-item-td">¥${item.price}</div>
          <div class="rank-item-td">${item.qty}</div>
        </div>`;
        $rankList.append(rankItem);
      }
    }

    // 滚动到下一个数据（顶部移出，底部插入）- 更平滑的版本
    function scrollToNext() {
      const $items = $rankList.find(".rank-item");
      const $firstItem = $items.first();

      // 添加CSS类来控制动画，而不是使用jQuery animate
      $firstItem.addClass("slide-out-up");

      // 监听动画完成事件
      setTimeout(() => {
        // 移除第一个元素
        $firstItem.remove();

        // 更新起始索引，向后移动一位
        startIndex = (startIndex + 1) % allOthers.length;

        // 计算新插入的数据索引（底部新增的数据）
        const newDataIndex = (startIndex + displayCount - 1) % allOthers.length;
        const newItem = allOthers[newDataIndex];
        const newRankNumber = newDataIndex + 4; // 从第4名开始计算

        // 创建新的排行项
        const newRankItem = `
        <div class="rank-item rank-item-no-img slide-in-down">
          <div class="rank-item-td">
            <div class="rank-number">${newRankNumber}</div>
            <div class="text-ellipsis-2">${newItem.name}</div>
          </div>
          <div class="rank-item-td">${newItem.dim}</div>
          <div class="rank-item-td">¥${newItem.price}</div>
          <div class="rank-item-td">${newItem.qty}</div>
        </div>
      `;

        // 在底部添加新元素
        $rankList.append(newRankItem);

        // 触发滑入动画
        const $newItem = $rankList.find(".rank-item").last();
        setTimeout(() => {
          $newItem.removeClass("slide-in-down").addClass("slide-in-complete");
        }, 50);
      }, 300); // 与CSS动画时间匹配
    }

    // 初始显示 4-10 名
    updateDisplay();

    // 如果数据足够多，启动滚动效果
    if (allOthers.length > displayCount) {
      setInterval(scrollToNext, 3000);
      console.log("4名以后数据渲染完成，每3秒滚动显示下一个");
    } else {
      console.log("4名以后数据渲染完成，数据不足，不启动滚动");
    }
  }
});
